{% extends "base.html" %}

{% block content %}

<div class="card shadow-sm mb-4">
    <div class="row p-4">
        <!-- Left column for Queue Status -->
        <div class="col-md-6">
            <div class="queue-status text-center">
                <h3>Queue Status</h3>
                <p id="queue-pending">Pending: 0</p>
                <p id="queue-running">Running: 0</p>
            </div>
        </div>

        <!-- Right column for Buttons -->
        <div class="col-md-6 d-grid gap-2">
            <a href="/docs" class="btn btn-success shadow">Docs</a>
            <a href="/images/download_all" class="btn btn-primary shadow">Download ZIP</a>
            <button type="button" class="btn btn-danger shadow" data-bs-toggle="modal" data-bs-target="#deleteModal">
                Delete all files
            </button>
        </div>
    </div>
</div>

<!-- Image grid -->
<div class="card shadow-sm">
    <div class="card-header">
        <h2>Images count: <span id="image-count">{{ images|length }}</span></h2>
    </div>
    <div id="image-grid" class="row p-4 row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
        {% if images %}
            {% for image in images %}
                <div class="col" id="image-card-{{ image }}">
                    <div class="card">
                        <a href="#{{ image }}" class="card-body text-center p-0 lightbox-trigger">
                            <img src="/images/{{ image }}" class="card-img-top" alt="{{ image }}" style="object-fit: contain;">
                        </a>
                        <div id="{{ image }}" class="lightbox" style="display: none;">
                            <a href="#" class="close" style="position: absolute; top: 10px; right: 15px; color: white; font-size: 30px; text-decoration: none;">&times;</a>
                            <img src="/images/{{ image }}" alt="{{ image }}">
                        </div>
                        <div class="card-footer">
                            <div class="row gap-2">
                                <button class="btn btn-outline-primary col-sm" data-image-name="{{ image }}">Download</button>
                                <button class="btn btn-outline-danger col-sm delete-image-btn" data-image-name="{{ image }}">Delete</button>
                            </div>   
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <h2 class="text-center" id="no-images-message">No images found</h2>
        {% endif %}
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Delete all files</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete all files?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-danger" id="delete-btn" data-url="/images">Delete all files</button>
        </div>
        </div>
    </div>
</div>

<!--Tast container-->
<div class="alert-container" id="alert-container" style="position: fixed; bottom: 0; right: 0; z-index: 1000; padding: 1rem;"></div>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', path='/js/images.js') }}"></script>
{% endblock %}
